﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="../themes/default/easyui.css" rel="stylesheet" />
    <link href="../themes/icon.css" rel="stylesheet" />
    <script src="../jquery-easyui-1.4.3/jquery.min.js"></script>
    <script src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <title></title>
	<meta charset="utf-8" />
    <script>
        $(function () {
            //分页
            (function ($) {
                function pagerFilter(data) {
                    if ($.isArray(data)) {	// is array
                        data = {
                            total: data.length,
                            rows: data
                        }
                    }
                    var dg = $(this);
                    var state = dg.data('datagrid');
                    var opts = dg.datagrid('options');
                    if (!state.allRows) {
                        state.allRows = (data.rows);
                    }
                    var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
                    var end = start + parseInt(opts.pageSize);
                    data.rows = $.extend(true, [], state.allRows.slice(start, end));
                    return data;
                }

                var loadDataMethod = $.fn.datagrid.methods.loadData;
                $.extend($.fn.datagrid.methods, {
                    clientPaging: function (jq) {
                        return jq.each(function () {
                            var dg = $(this);
                            var state = dg.data('datagrid');
                            var opts = state.options;
                            opts.loadFilter = pagerFilter;
                            var onBeforeLoad = opts.onBeforeLoad;
                            opts.onBeforeLoad = function (param) {
                                state.allRows = null;
                                return onBeforeLoad.call(this, param);
                            }
                            dg.datagrid('getPager').pagination({
                                onSelectPage: function (pageNum, pageSize) {
                                    opts.pageNumber = pageNum;
                                    opts.pageSize = pageSize;
                                    $(this).pagination('refresh', {
                                        pageNumber: pageNum,
                                        pageSize: pageSize
                                    });
                                    dg.datagrid('loadData', state.allRows);
                                }
                            });
                            $(this).datagrid('loadData', state.data);
                            if (opts.url) {
                                $(this).datagrid('reload');
                            }
                        });
                    },
                    loadData: function (jq, data) {
                        jq.each(function () {
                            $(this).data('datagrid').allRows = null;
                        });
                        return loadDataMethod.call($.fn.datagrid.methods, jq, data);
                    },
                    getAllRows: function (jq) {
                        return jq.data('datagrid').allRows;
                    }
                })
            })(jQuery);

            function getData() {
                var rows = [];
                for (var i = 1; i <= 800; i++) {
                    var amount = Math.floor(Math.random() * 1000);
                    var price = Math.floor(Math.random() * 1000);
                    rows.push({
                        inv: 'Inv No ' + i,
                        date: $.fn.datebox.defaults.formatter(new Date()),
                        name: 'Name ' + i,
                        amount: amount,
                        price: price,
                        cost: amount * price,
                        note: 'Note ' + i
                    });
                }
                return rows;
            }

            $(function () {
                $('#dg').datagrid({ data: getData() }).datagrid('clientPaging');
            });
       //按钮
            $('#btAdd').linkbutton({
                iconCls: 'icon-add'
    });
            $('#btDelete').linkbutton({
                iconCls: 'icon-edit'
    });
            $('#btRevise').linkbutton({
                iconCls: 'icon-remove'
    });  
            $('#btSelect').linkbutton({
                iconCls: 'icon-search'
    });
            //绑定表格
            $('#dg').datagrid({
                url: "/Jquery-easyUI/demo/datagrid/datagrid_data1.json",
                toolbar: "#dg1",
                method: "get",
                pagination: true,
                rownumbers: true,
                singleSelect: true,
                columns: [[
                    { field: 'productid', title: '等级编号', width: 100 },
                    { field: 'productname', title: '等级名称', width: 100 },
                    { field: 'unitcost', title: '所需最大积分', width: 100 },
                    { field: 'status', title: '扣分比例', width: 100 },
                     { field: 'listprice', title: '折扣比例', width: 100 },
                       { field: 'attr1', title: 'xx', width: 100 },
                       { field: 'itemid', title: 'xx', width: 100 },
                ]]
            });
            ////点击添加弹窗
            $('#btAdd').click(function () {
                $('#dd').dialog({
                    title: '新增用户',
                    width: 500,
                    height: 300 })
                .dialog('open');
                $("#ifmAdd").attr("src", "UserAdd.html")
            })
            //点击修改弹窗
            $('#btRevise').click(function () {
                var row = $('#dg').datagrid('getSelected');
                if (row != null) {
                    $('#cc').dialog({
                        title: '修改用户',
                        width: 500,
                        height: 300
                    })
                    .dialog('open');
                    $("#ifmRevise").attr("src", "UserRevise.html")
                }
                else {
                    $.messager.alert("提示", "请选择需要编辑的行", "warning");

                };

            })
            //点击删除
            $('#btDelete').click(function () {
                var row = $('#dg').datagrid('getSelected');
                if (row != null) {
                    $.messager.confirm('确认', '您要删除这行数据吗？', function (r) {
                       
                    });
                    }
                else {
                    $.messager.alert("提示", "请选择需要删除的行", "warning");
                }
            })
   
        }) </script>
</head>
<body>
    <div id="dg1">
        <a id="btAdd">添加</a>
        <a id="btDelete">删除</a>
        <a id="btRevise">修改</a><br />
        登录名：<input id="txtAccount" type="text" />
        真实姓名:<input id="txtName" type="text" />
        联系电话：<input id="txtNumber" type="text" />
        <a id="btSelect">查找</a>
        </div>
        <table id="dg"></table>
    <div>
        <div id="dd" data-options="iconCls:'icon-save',resizable:true,modal:true">
            <iframe id="ifmAdd" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
            </div>
                <div id="cc" data-options="iconCls:'icon-save',resizable:true,modal:true">
                    <iframe id="ifmRevise" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
                </div>
            </div>
        
</body>
</html>
